<template>
    <NConfigProvider :theme="theme" :locale="zhCN" :date-locale="dateZhCN">
        <!-- 挂载CSS全局变量 -->
        <NEl class="flex">
            <RouterView />
        </NEl>
        <!-- NConfigProvider无法将全局样式同步到它以外的地方(例如body背景色) -->
        <!-- 通过使用NGlobalStyle可以将常见的全局样式同步到body上 -->
        <NGlobalStyle />
    </NConfigProvider>
</template>

<script setup lang="ts">
import { watchEffect, provide, ref } from 'vue';
import {
    useOsTheme, darkTheme, lightTheme, zhCN, dateZhCN,
} from 'naive-ui';

// 主题默认为系统主题, 并且随系统主题变化而变化, 也支持点击切换
const theme = ref();
const osThemeRef = useOsTheme();
watchEffect(() => {
    theme.value = osThemeRef.value === 'dark' ? darkTheme : lightTheme;
});

provide('theme', theme);
</script>

<!-- 全局的CSS全部写在这里 -->
<style>
html {
    /* rem单位是以html元素的font-size为参照, 若不设置, 默认为16px. 而Naive UI中默认的文字大小变量为14px, 所以这里统一设为14px. */
    font-size: 14px;
}
</style>
